<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>number</title>
	<style>
		*, html, body {
			margin: 0px;
			padding: 0px;
		}
		.o-div {
			width: 500px;
			margin: 100px;
		}
		h2 {
			height: 40px;
			background-color: #f5f5f5;
			position: relative;
		}
		span {
			width: 25px;
			display: inline-block;
			height: 40px;
			overflow: hidden;
			position: relative;
		}
		span:before {
			content: '0123456789';
			display: block;
			width: 22px;
			line-height: 40px;
			top: 0px;
			word-break: break-all;
			position: absolute;
			display: block;
		}
		span.num-2:before {
			transition: top 1.2s ease-in;
			top: -80px;
		}
		span.num-6:before {
			transition: top 1.2s ease-in;
			top: -240px;
		}


        .card-wrapper {
            background-color: transparent; 
            width: 250px;
            height: 350px;
            margin: 0 auto;
            perspective: 1000px;
            -webkit-perspective: 1000px;
        }
        .inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform .5s;
            transform-style: preserve-3d;

        }
        .inner > div {
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;
        }
        .front{
            background-color: pink;

        }
        .back {
            background-color: yellowgreen;
            transform: rotateY(180deg);
        }
        .card-wrapper:hover .inner {
            transform: rotateY(180deg);
        }
	</style>
</head>
<body>
	<div class="o-div">
		<h2>
			<span id="n1" class="num"></span>
			<span id="n2" class="num"></span>
		</h2>
    </div>
    
    <div class="card-wrapper">
        <div class="inner">
            <div class="front">
                <!-- <img src="img/front.jpg" alt=""> -->
            </div>
            <div class="back">
                <!-- <img src="img/back.jpg" alt=""> -->
            </div>
        </div>    
    </div>

	<script>
		var oS1 = document.getElementById('n1');
		var oS2 = document.getElementById('n2');
		setTimeout(function () {
			oS1.className = oS1.className + ' num-2';
			oS2.className = oS2.className + ' num-6';
		}, 1000)
		
	</script>
</body>
</html>